<script setup lang="ts">
import { watch } from 'vue';
import type { AppSettings } from '../types';
import { FileSystemUtils } from '../fileSystem';

// Props
const props = defineProps<{
  modelValue: boolean;
  settings: AppSettings;
}>();

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  'update-settings': [settings: AppSettings];
  'folder-selected': [data: {fileTree: any[], rootHandle: any}]; // 修改事件，同时传递文件树和根目录句柄
}>();

// 本地设置副本
const localSettings = { ...props.settings };

// 监听设置变化
watch(() => props.settings, (newSettings) => {
  Object.assign(localSettings, newSettings);
}, { deep: true });

// 选择Markdown文件夹
  const selectMarkdownFolder = async () => {
    try {
      // 获取文件夹和文件树
      const result = await FileSystemUtils.selectFolderAndBuildTree();
      if (result.fileTree.length > 0 && result.rootHandle) {
        // 使用更有意义的显示路径更新输入框
        localSettings.markdownFolderPath = result.displayPath;
        
        // 新增一个事件，将文件树和根目录句柄传递回父组件
        emit('folder-selected', result);
        
        saveSettings();
      }
    } catch (error) {
      console.error('选择文件夹出错:', error);
    }
  };

// 保存设置
const saveSettings = () => {
  emit('update-settings', { ...localSettings });
  FileSystemUtils.saveSettings(localSettings);
};

// 关闭对话框
const closeDialog = () => {
  emit('update:modelValue', false);
};

// 处理背景点击
const handleBackdropClick = (e: MouseEvent) => {
  if (e.target === e.currentTarget) {
    closeDialog();
  }
};
</script>

<template>
  <div v-if="modelValue" class="settings-dialog-backdrop" @click="handleBackdropClick">
    <div class="settings-dialog">
      <div class="dialog-header">
        <h2>设置</h2>
        <button class="close-btn" @click="closeDialog">×</button>
      </div>
      
      <div class="dialog-content">
        <div class="setting-item">
          <label for="markdown-folder">Markdown文件夹路径</label>
          <div class="setting-input-group">
            <input
              id="markdown-folder"
              type="text"
              v-model="localSettings.markdownFolderPath"
              readonly
              class="folder-path-input"
            />
            <button class="btn select-folder-btn" @click.stop="selectMarkdownFolder">
              选择文件夹
            </button>
          </div>
          <p class="setting-hint">
            选择包含Markdown文件的文件夹，系统将扫描并显示该文件夹下的所有.md文件
          </p>
        </div>
        
        <div class="setting-item">
          <label for="font-family">字体</label>
          <select
            id="font-family"
            v-model="localSettings.fontFamily"
            class="setting-select"
          >
            <option value="system-ui">系统默认</option>
            <option value="Arial">Arial</option>
            <option value="Helvetica">Helvetica</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Georgia">Georgia</option>
            <option value="Courier New">Courier New</option>
            <option value="Consolas">Consolas</option>
            <option value="Microsoft YaHei">微软雅黑</option>
            <option value="SimSun">宋体</option>
            <option value="SimHei">黑体</option>
          </select>
        </div>
        
        <div class="setting-item">
          <label for="font-size">字体大小 (px)</label>
          <input
            id="font-size"
            type="number"
            v-model="localSettings.fontSize"
            min="12"
            max="32"
            class="setting-input"
          />
        </div>
        
        <div class="setting-item">
          <label for="theme">主题</label>
          <select
            id="theme"
            v-model="localSettings.theme"
            class="setting-select"
          >
            <option value="light">浅色主题</option>
            <option value="dark">深色主题</option>
          </select>
        </div>
      </div>
      
      <div class="dialog-footer">
        <button class="btn cancel-btn" @click.stop="closeDialog">取消</button>
        <button class="btn primary save-btn" @click.stop="() => { saveSettings(); closeDialog(); }">
          保存
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.settings-dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.settings-dialog {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.dialog-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: #f0f0f0;
}

.dialog-content {
  padding: 1.5rem;
}

.setting-item {
  margin-bottom: 1.5rem;
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-item label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.setting-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.folder-path-input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 0.9rem;
}

.setting-hint {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0;
}

/* 设置选择框样式 */
.setting-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

.setting-select:focus {
  outline: none;
  border-color: #42b983;
}

/* 设置输入框样式 */
.setting-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  font-size: 0.9rem;
}

.setting-input:focus {
  outline: none;
  border-color: #42b983;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e0e0e0;
  background-color: #f9f9f9;
}

/* 按钮样式 */
.btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.btn:hover {
  background-color: #f0f0f0;
}

.btn.primary {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

.btn.primary:hover {
  background-color: #3aa876;
}

.select-folder-btn {
  white-space: nowrap;
}
  
  /* 深色主题样式 */
  .dark-theme .settings-dialog {
    background-color: #1e1e1e;
    color: #d4d4d4;
  }
  
  .dark-theme .dialog-header {
    border-bottom-color: #333;
  }
  
  .dark-theme .dialog-header h2 {
    color: #ffffff;
  }
  
  .dark-theme .close-btn {
    color: #999;
  }
  
  .dark-theme .close-btn:hover {
    background-color: #333;
    color: #d4d4d4;
  }
  
  .dark-theme .setting-item label {
    color: #d4d4d4;
  }
  
  .dark-theme .folder-path-input {
    background-color: #2d2d2d;
    border-color: #444;
    color: #d4d4d4;
  }
  
  .dark-theme .setting-hint {
    color: #999;
  }
  
  .dark-theme .setting-select {
    background-color: #2d2d2d;
    border-color: #444;
    color: #d4d4d4;
  }
  
  .dark-theme .setting-select:focus {
    border-color: #42b983;
  }
  
  .dark-theme .setting-input {
    background-color: #2d2d2d;
    border-color: #444;
    color: #d4d4d4;
  }
  
  .dark-theme .setting-input:focus {
    border-color: #42b983;
  }
  
  .dark-theme .dialog-footer {
    background-color: #2d2d2d;
    border-top-color: #333;
  }
  
  .dark-theme .btn {
    background-color: #1e1e1e;
    border-color: #444;
    color: #d4d4d4;
  }
  
  .dark-theme .btn:hover {
    background-color: #2d2d2d;
  }
  
  .dark-theme .btn.primary {
    background-color: #42b983;
    border-color: #42b983;
    color: white;
  }
  
  .dark-theme .btn.primary:hover {
    background-color: #3aa876;
  }
</style>